<link rel="stylesheet" href="{{URL::asset('./css/activity/cate.css')}}">
@extends('home.layout.base')
@section('content')
<div class="main" id="document">
    <div class="document_main">
        <div class="document_left">
            <div class="document_leftTitle">
                <img src="{{URL::asset('./img/word/title.png')}}" alt="">
                <span>分类目录</span>
            </div>
            <div class="couSBg" v-for="(item,index) in listData"  v-if="index<8" @mouseenter="hoverEnter(item)" @mouseleave="hoverLeave(item)">
                <span @click="window.location.href='{{route('home.activity.actList')}}?pid='+item.value"><img :src="item.before_icon"> @{{item.label}}</span>
                <div v-if="item.bool  && item.children" class="couSBg_2">
                    <span @click="window.location.href='{{route('home.activity.actList')}}?pid='+item.value+'&childId='+child.value"
                     v-for="(child,index) in item.children">
                        @{{child.label}}</span>
                </div>
            </div>
        </div>
        <div class="document_right">
            <div class="document_swiper">
                <div id="document_swiper" class="carousel slide" data-interval="5000">
                    <ol class="carousel-indicators">
                        <li data-target="#document_swiper" v-for="(item,index) in swiperData" :data-slide-to="index" :class="{active:index==0}"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                            <a :href="item.link">
                                <img :src="item.thumb" alt="..."></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="document_content">
        <div class="document_content_left">
            <div class="hotDownload">
                <div class="hotDownload_header">
                    <span>热门活动</span>
                    <a href="{{route('home.activity.actList') }}">更多 ></a>
                </div>
                <div class="hotDownload_content">
                    <div class="content_main" v-for="(item,index) in hotArr">
                        <span class="cateMes_title">
                            <span>@{{item.title}}</span>
                            <span>
                                <a>
                                    <img src="{{URL::asset('./img/icon/eye.png')}}">
                                    @{{item.view}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/child.png')}}">
                                    @{{item.number}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/time.png')}}">
                                    @{{item.enroll_at}}
                                </a>
                            </span>
                        </span>
                        <span class="cateMes_main">
                            <img :src="item.thumb">
                            <div class="cateMes_main_right">
                                <p class="cateMes_main_right_Title">
                                    <span> 主办方：@{{item.sponsor}}</span>
                                    <span>￥@{{item.cost}}</span>
                                </p>
                                <p>
                                    一级分类：【@{{item.cate_pid?item.cate_pid.name:''}}】
                                </p>
                                <p>
                                    子分类：【@{{item.cate_id?item.cate_id.name:''}}】
                                </p>
                                <p>
                                    参加人数：@{{item.limit}}人
                                </p>
                                <p>
                                    活动时间：@{{item.start_at}}
                                </p>
                                <p>
                                    活动地点：@{{item.place}}
                                    <button @click=" window.location.href = '{{route('home.activity.actDetails') }}?cateId='+item.id">@{{item.act_state}}</button>
                                </p>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
            <div class="hotDownload" style="margin-top:20px;">
                <div class="hotDownload_header">
                    <span>最新活动</span>
                    <a href="{{route('home.activity.actList') }}">更多 ></a>
                </div>
                <div class="hotDownload_content">
                    <div class="content_main" v-for="(item,index) in newArr">
                        <span class="cateMes_title">
                            <span>@{{item.title}}</span>
                            <span>
                                <a>
                                    <img src="{{URL::asset('./img/icon/eye.png')}}">
                                    @{{item.view}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/child.png')}}">
                                    @{{item.number}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/time.png')}}">
                                    @{{item.enroll_at}}
                                </a>
                            </span>
                        </span>
                        <span class="cateMes_main">
                            <img src="{{URL::asset('./img/activity/title.png')}}">
                            <div class="cateMes_main_right">
                                <p class="cateMes_main_right_Title">
                                    <span> 主办方：@{{item.sponsor}}</span>
                                    <span>￥@{{item.cost}}</span>
                                </p>
                                <p>
                                    一级分类：【@{{item.cate_pid?item.cate_pid.name:''}}】
                                </p>
                                <p>
                                    子分类：【@{{item.cate_id?item.cate_id.name:''}}】
                                </p>
                                <p>
                                    参加人数：@{{item.limit}}人
                                </p>
                                <p>
                                    活动时间：@{{item.start_at}}
                                </p>
                                <p>
                                    活动地点：@{{item.place}}
                                    <button @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id">@{{item.act_state}}</button>
                                </p>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="document_content_right">
            <div class="rapidRelease" @mouseleave="QRcodeDialog=false">
                <div class="rapidRelease_header">
                    <span>快速发布需求</span>
                    <span>众多商家主动参与，轻松挑选满意方案！</span>
                </div>
                <div class="rapidRelease_input">
                    <el-form :model="form" ref="ruleForm">
                        <el-form-item prop="tel" :rules="telRule">
                            <el-input v-model="form.tel" type="text" placeholder="您的手机号" />
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <button @click="submitForm('ruleForm')">
                        立即发布
                    </button>
                </div>
                <div class="rapidRelease_right">
                </div>
                <div class="rapidRelease_QRcode" v-show="QRcodeDialog">
                    <span>扫码进入微信公众号</span>
                    <span>手机快捷发布</span>
                    <img src="{{URL::asset('./img/store/dialogTelbigQR.png')}}">

                </div>
                <img @mouseenter.stop="QRcodeDialog=true" src="{{URL::asset('./img/store/rapidRelease_right.png')}}" class="rapidRelease_rightImg">
            </div>
            <div class="publicityImg" v-for="(item,index) in publicityImgArr">
                <a :href="item.link">
                    <img :src="item.thumb" alt="..."></a>
            </div>
        </div>

    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#document',
            data() {
                return {
                    swiperData: [],
                    listData: [],
                    QRcodeDialog: false,
                    form: {
                        tel: '',
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    hotArr: [],
                    newArr: [],
                    publicityImgArr: [],
                }
            },
            created() {
                this.getSwiper();
                this.getList();
            },
            mounted() {},
            methods: {
                hoverEnter(item) {
                    item.bool = true;
                },
                hoverLeave(item) {
                    item.bool = false;
                },
                getSwiper() {
                    let data = {
                        adsense_id: 15
                    }
                    apiAjax("{{ route('home.public.advs')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.swiperData = res.data;
                            $('.carousel').carousel('cycle');
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                    //右侧广告栏
                    apiAjax("{{ route('home.public.advs')}}", 'get', {
                        adsense_id: 17
                    }, (res) => {
                        if (res.code == 0) {
                            this.publicityImgArr = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getList() {
                    let data = {}
                    apiAjax("{{ route('home.activity.actCatesApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.listData = res.data.act_cate;
                            this.hotArr = res.data.act_hot;
                            this.newArr = res.data.act_new;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitDemandAdd(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            window.location.href = "{{ route('home.demand.demandAdd') }}?tel=" + this.form.tel;
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection